<template>
    <div class="outer">
        <div class="inner">
            <div class="logo" :style="{backgroundImage:'url('+logo+')'}" @click="$router.push('/')"></div>


            <!--            <div class="img_and_name">-->
            <!--                <el-avatar :size="28" src="https://img1.baidu.com/it/u=1522015854,2481348088&fm=26&fmt=auto" class="img">-->
            <!--                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>-->
            <!--                </el-avatar>-->
            <!--                <span class="name">倪妮</span>-->
            <!--            </div>-->


            <div class="btnRight">
                <div class="author" @click="userToAuthor" v-if="!creation&&!(userInfo.status==2)"><span>成为作者</span>
                </div>
                <router-link :to="{ name: 'creat' }" class="creation" v-if="creation">
                    <i class="el-icon-plus"></i>
                    创作
                </router-link>
                <div
                        v-if="!(userInfo.username || userInfo.userName)"
                        class="resgin"
                        @click="login"
                >
                    <span>注册</span> <span class="bor"></span> <span>登录</span>
                </div>
                <div v-else>
                    <el-dropdown>
            <span class="el-dropdown-link">

                    <span class="img">
                        <el-avatar :size="30" :src="userAvatar" fit="fill">
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                        </el-avatar>
                    </span>
              {{ userInfo.username || userInfo.userName }}
            </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                >
                                    <router-link :to="{ name: 'personalCenter' }"
                                    >个人中心
                                    </router-link
                                    >
                                </el-dropdown-item
                                >
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import logo from '@/assets/img/logo.png'

    import Login from "@/pages/common/login.vue";
    import Author from "@/pages/common/author.vue";
    import {Logout} from "@/api/UserInfo"
    import {getUserInfo, removeUserInfo} from "@/utils/auth";
    import baseConfig from "@/utils/config"


    export default {
        name: "fa_bu_header",

        components: {
            Login,
            Author,
        },

        watch: {
            userInfo(nv) {
                debugger
            }
        },

        computed: {
            userAvatar() {
                return baseConfig.dev + this.$store.state.userInfo.userAvatar
            },
            userInfo() {
                return this.$store.state.userInfo
            }
        },

        watch: {
            $route(to, form) {
                if (to.name == 'creation' || to.name == 'creat') {
                    this.creation = true
                } else {
                    this.creation = false
                }
            },
            userInfo: {
                handler(nv) {
                    debugger
                },
                deep: true
            },
        },


        data() {
            return {
                logo,
                creation: false,
            }
        },

        methods: {
            to(name) {
                if (!this.userInfo.userName) {
                    this.login()
                    return false
                }
                if (name == 'creation' && this.userInfo.status != 2) {
                    this.userToAuthor()
                    return false
                }
                this.$router.push({name: name})
            },
            login() {
                this.$refs.login.dialogVisible = true;
            },
            logout() {
                this.userInfo = {};
                Logout().then((res) => {
                })
                removeUserInfo();
                this.$store.commit('setUser', {})
                this.$router.push({path: "/"});
            },
            userToAuthor() {
                this.$refs.author.dialogVisible = true;
            },
        }
    }
</script>

<style scoped lang="scss">
    .outer {
        width: 100%;
        height: 50px;
        z-index: 200;
        position: fixed;
        top: 0px;
        background: #FFFFFF;
    }

    .inner {
        width: 1000px;
        height: 100%;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        width: 95px;
        height: 31px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .img_and_name {
        display: flex;
        align-items: center;
    }

    .img {
        cursor: pointer;
    }

    .name {
        margin-left: 5px;
        cursor: pointer;
    }

    .btnRight {
        display: flex;
        font-size: 14px;

        &
        > div {
            width: 88px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            box-sizing: border-box;

            .el-dropdown-link {
                display: flex;
                align-items: center;

                .img {
                    padding-right: 10px;
                }

            }

            span {
                cursor: pointer;
            }

            &
            .author {
                border: 1px solid #2eb0c6;
                color: #2eb0c6;
                margin-right: 20px;
            }

            &
            .resgin {
                background: #2eb0c6;
                color: #fff;

                span.bor {
                    width: 1px;
                    background: #fff;
                    height: 12px;
                    display: block;
                    margin: 0 4px;
                }

            }
        }

        .creation {
            border: 1px solid #2eb0c6;
            border-radius: 13px;
            width: 61px;
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2eb0c6;
            font-size: 12px;
            cursor: pointer;

            i {
                margin-right: 5px;
            }

        }
    }

</style>